<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>迅雷</title>
    <link rel="stylesheet" href="css/nheader.css">
    <link rel="stylesheet" href="css/nstyle.css">

</head>
<body>
<div class="header">
    <h1 class="logo png"><a href="http://www.xunlei.com/" title="迅雷网络"><img src="images/n_logo.png" class="png" alt="迅雷网络"></a></h1>
    <ul class="nav_list">
        <li class="nav_li">
            <a href="http://dl.xunlei.com/?from=index" class="btn_nav"  target="_blank"><i class="ic_product png"></i>产品中心</a>
        </li>
        <li class="nav_li">
            <a href="http://www.xunlei.com/newscenter.html" class="btn_nav"><i class="ic_new png"></i>新闻中心</a>
        </li>
        <li class="nav_li">
            <a href="javascript:;" class="btn_nav" id="nav_more"><i class="ic_more png"></i>更多</a>
            <div class="more_nav" id="more_nav" style="height: 920px;">
                <i class="ic_bdot png" id="h_bdot"></i>
                <ul id="h_nav">
                    <li>
                        <a href="http://www.xycdn.com/" target="_blank" class="btn_snav">星域CDN</a>
                    </li>
                    <li>
                        <a href="http://hr.xunlei.com/" class="btn_snav" target="_blank">人力资源</a>
                    </li>
                    <li>
                        <a href="http://ir.xunlei.com/" target="_blank" class="btn_snav">投资关系</a>
                    </li>
                    <li>
                        <a href="http://www.xunlei.com/introduction.html" target="_blank" class="btn_snav">关于迅雷</a>
                    </li>
                    <li>
                        <a href="http://www.xunlei.com/connection.html" target="_blank" class="btn_snav">联系我们</a>
                    </li>

                </ul>
            </div>
        </li>
    </ul>
</div>
<div class="wrap big_view xbig css3" id="wrap" style="height: 920px;">
    <div class="wrapper">
        <div class="product_list" id="product_list">
            <div class="product_box xnet9 show" style="opacity: 1; z-index: 1;">
                <div class="bg_box">
                    <img src="images/bg_xnet9.jpg" style="width: 1920px; height: auto; margin: -540px 0 0 -960px;">
                </div>
                <!-- 画布 -->
                <canvas id="canvas" width="1920" height="920"></canvas>
                <div class="content ">
                    <span class="page_bg"></span>
                    <div class="main_box" style="height: 1080px; margin-top: -540px;">
                        <h2 class="hide_txt png">
                            精彩，一下就有
                        </h2>
                        <a href="http://xl9.xunlei.com/" target="_blank" class="btn_product" title="迅雷">迅雷</a>
                    </div>
                </div>
            </div>
            <div class="product_box shoulei show" style="opacity: 0; z-index: 0;">
                <div class="bg_box">
                    <img src="images/bg_shoulei.jpg" style="width: 1920px; height: auto; margin: -540px 0 0 -960px;">
                </div>
                <div class="content ">
                    <div class="main_box" style="height: 1080px; margin-top: -540px;">
                        <h2 class="hide_txt  png">
                            <span class="txt_1 png">炽</span>
                            <span class="txt_2 png">热</span>
                            <span class="txt_3 png">追</span>
                            <span class="txt_4 png">片</span>
                            <span class="txt_5 png">之</span>
                            <span class="txt_6 png">心</span>
                            <span class="txt_7 png">没</span>
                            <span class="txt_8 png">有</span>
                            <span class="txt_9 png">wifi</span>
                            <span class="txt_10 png">也</span>
                            <span class="txt_11 png">挡</span>
                            <span class="txt_12 png">不</span>
                            <span class="txt_13 png">住</span>
                        </h2>
                        <a href="http://mobile.xunlei.com/" target="_blank" class="btn_product" title="手机迅雷">手机迅雷</a>
                    </div>
                </div>
            </div>
            <div class="product_box member" style="opacity: 1; z-index: 0;">
                <div class="bg_box">
                    <img src="images/bg_member.jpg" style="width: 1920px; height: auto; margin: -540px 0 0 -960px;">
                </div>
                <div class="content ">
                    <div class="main_box" style="height: 1080px; margin-top: -540px;">
                        <h2 class="hide_txt  png">
                            <span class="txt_1 png">快</span>
                            <span class="txt_2 png">让</span>
                            <span class="txt_3 png">生</span>
                            <span class="txt_4 png">活</span>
                            <span class="txt_5 png">慢</span>
                            <span class="txt_6 png">下</span>
                            <span class="txt_7 png">来</span>
                        </h2>
                        <a href="http://vip.xunlei.com/" target="_blank" class="btn_product" title="迅雷会员">迅雷会员</a>
                    </div>
                </div>
            </div>

            <div class="product_box xav" style="z-index: 0; opacity: 1;">
                <div class="bg_box">
                    <img src="images/bg_xav.jpg" style="width: 1920px; height: auto; margin: -540px 0 0 -960px;">
                </div>
                <div class="content ">
                    <div class="main_box" style="height: 1080px; margin-top: -540px;">
                        <h2 class="hide_txt png">
                            <span class="txt_1 png">流</span>
                            <span class="txt_2 png">畅</span>
                            <span class="txt_3 png">画</span>
                            <span class="txt_4 png">质</span>
                            <span class="txt_5 png">乐</span>
                            <span class="txt_6 png">无</span>
                            <span class="txt_7 png">止</span>
                            <span class="txt_8 png">境</span>
                        </h2>
                        <a href="http://video.xunlei.com/pc.html" target="_blank" class="btn_product" title="迅雷影音">迅雷影音</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="product_btns" id="product_btns">
            <div class="content ">
                <div class="btns_area">
                    <div class="btns_box" id="control_box">
                        <a href="http://xl9.xunlei.com/" target="_blank" class="btn_xnet9" title="迅雷9"><span class="ic_xnet9 hide_txt png">迅雷9</span></a>
                        <a href="http://mobile.xunlei.com/" target="_blank" class="btn_ipr btn_shoulei cur" title="手机迅雷"><span class="ic_shoulei hide_txt png">手机迅雷</span></a>
                        <a href="http://vip.xunlei.com/" target="_blank" class="btn_member" title="迅雷会员"><span class="ic_member hide_txt png">迅雷会员</span></a>
                        <a href="http://video.xunlei.com/pc.html" target="_blank" class="btn_xav" title="迅雷影音"><span class="ic_xav hide_txt png">迅雷影音</span></a>
                        <span class="ic_line" id="ic_line"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="rpt_bg png" id="rpt_bg"></div>
    </div>
</div>
<div class="footer f_color2" id="footer">
    <div class="foot">
        <p class="links">
            <a href="http://www.xunlei.com/images/zzdx.jpg" target="_blank">增值电信业务粤B2-20050219号</a>
            <span>|</span>
            <a target="_blank" href="http://www.xunlei.com/images/wlwh.jpg">粤网文[2016]0901-125号</a>
            <span>|</span>
            <a target="_blank" href="http://www.xunlei.com/images/gb.jpg">广电节目经营(粤)字第786号-20050219号</a>
            <span>|</span>
            <a target="_blank" href="http://www.xunlei.com/images/cbxkz.jpg">互联网出版(粤)字053号</a>
            <span>|</span>
            <a target="_blank" href="http://www.xunlei.com/images/ypfw.jpg">互联网药品证书</a>
        </p>
        <p>迅雷会员专属客服热线:400-1111-000 违法信息举报电话:0755-86319951 举报邮箱xljubao@xunlei.com  Copyright © 2003-2016 XUNLEI.COM All Rights Reserved</p>
        <div class="safe_links">
            <a href="http://www.szga.gov.cn/" target="_blank"><img src="images/safe_1.png">深圳网络警察报警平台</a>
            <a href="http://www.szga.gov.cn/SZGA_Scene/641/1514/#currState=2" target="_blank"><img src="images/safe_2.png">公共信息安全网络监察</a>
            <a href="http://www.szcredit.com.cn/web/gspt/newGSPTdetail.aspx?ID=7a0b9e46096443d684e77eb4399e7474&amp;tabpro=111" target="_blank"><img src="images/safe_3.png">经营性网站备案信息</a>
            <a href="http://www.12377.cn/" target="_blank"><img src="images/safe_4.png">不良信息举报中心</a>
        </div>
    </div>
</div>
<script src="js/jquery.js"></script>
<script src="js/effect.js"></script>
<script>
    (function(){
        var $wrap=$("#wrap"),
                $pages=$("#product_list").find(".product_box"),
                $controlBox=$("#control_box"),//下方导航栏
                $productBtns=$("#product_btns"),
                $controls=$controlBox.find("a"),//下方导航栏按钮
                $icLine=$("#ic_line"),
                $hNav=$("#h_nav"),
                $hNavli=$hNav.find("li"),
                $hSubnav=$("#h_subnav"),
                $hSubDD=$hSubnav.find("dd"),
                $hBdot=$("#h_bdot"),
                $hSdot=$("#h_sdot"),
                $footer=$("#footer"),
                $bgs=$pages.find(".bg_box img"),
                $mainBoxs=$pages.find(".main_box"),
                $moreNav=$("#more_nav"),
                $rptBg=$("#rpt_bg");
        var data={
            pLength:$pages.length,
            curP:-1,
            isCan:true,
            isOnbtn:false,
            fColor:[2,2,1,1,1],
            dur: 5000,
            cNum:0
        };
        //下方横线增量
        var aDD=$controls.eq(0).width()+parseInt($controls.eq(0).css("margin-right").slice(0,-2))*2;
        var cId;
        var isCss3=function(){
            var style=document.createElement("div").style;
            return style.hasOwnProperty("animation");
        }();
        var isIE6=navigator.userAgent.indexOf("MSIE 6.0") > 0;

        //画布
        if(isCss3){
            cvsEffect.start();
            cvsEffect.one();
        }
        //页面自缩放
        var resize=function(){
            var w=$(window).width(),
                    h=$(window).height();
            $wrap.height(h);
            $moreNav.height(h);
            if(w/h<1920/1080){
                $bgs.height(h).css({width:"auto",margin:-.5*h+"px 0 0 "+-.5*1920/1080*h+"px"});
            }else{
                $bgs.width(w).css({height:"auto",margin:-.5*w*1080/1920+"px 0 0 "+-.5*w+"px"});
            }
            var imgH=$bgs.height();
            $mainBoxs.height(imgH).css("margin-top",-.5*imgH+"px");
            var cls;
            if(isCss3){//如果支持css3  animation
                document.getElementById("wrap").className="wrap big_view xbig css3";
                switch(true){
                    case w>=1920:{cls="";break;}
                    case w<1920&&w>=1680:{cls="small9";break;}
                    case w<1680&&w>=1600:{cls="small8";break;}
                    case w<1600&&w>=1536:{cls="small7";break;}
                    case w<1536&&w>=1440:{cls="small6";break;}
                    case w<1440&&w>=1366:{cls="small5";break;}
                    case w<1366&&w>=1280:{cls="small4";break;}
                    case w<1280&&w>=1024:{cls="small3";break;}
                    case w<1024:{cls="small2";break;}
                }
                for(var i=0;i<data.pLength;i++){
                    $pages.eq(i).find(".content").attr("class","content "+cls);
                }

                $productBtns.find(".content").attr("class","content "+cls);
            }else{
                switch(true){
                    case w>=1600:{cls="big_view";break;}
                    case w<1600&&w>=1440:{cls="mid_view";break;}
                    case w<1440:{cls="small_view";break;}
                }
                var ws=$wrap[0].className;
                if(isIE6&&(ws.indexOf("big")!=-1||ws.indexOf("mid")!=-1||ws.indexOf("small")!=-1)&&ws.indexOf(cls)==-1)
                    location.reload();
                $wrap.className="wrap "+cls;
            }
            aDD=$controls.eq(0).width()+parseInt($controls.eq(0).css("margin-right").slice(0,-2))*2;
        };
        $(window).resize(resize);
        resize();

        //轮播
        var pageChange=function(idx){//要切换的图片
            if(data.isOnbtn)//如果鼠标放置在按钮上，不切换
                return;
            if(idx>=-1&&idx<data.pLength&&idx!=data.curP&&data.isCan){//如果要切换的图片在-1和总图片之间，并且不是当前图片，且可切换
                data.isCan=false;
                data.cNum++;
                clearInterval(cId);//清除计时器
                idx=idx==-1?data.pLength-1:idx;//idx等于-1时idx等于最后一张图片
                $controls.removeClass("cur").eq(idx).addClass("cur");
                $pages.eq(data.curP).css({zIndex:0});
                $icLine.css({left:aDD*idx});
                // $footer.attr("class","footer f_color"+data.fColor[idx]);
                if(idx==0)
                    data.dur=5000;
                else
                    data.dur=3500;
                $pages.eq(idx).addClass("show").css({opacity:0,zIndex:1}).animate({opacity:1},400,function(){
                    $pages.eq(data.curP).removeClass("show");
                    $(this).addClass("show");
                    data.isCan=true;
                    data.curP=idx;
                    data.cNum--;
                    if(data.cNum==0){
                        cId=setInterval(function(){
                            pageChange((data.curP+1)%data.pLength);
                        },data.dur);
                    }
                });
            }
        };
        pageChange(0);
        $controls.on("mouseenter",function(){
            data.isCan=true;
            pageChange($controls.index(this));
            $icLine.css({left:aDD*$controls.index(this)});
            data.isOnbtn=true;
        });
        $controls.on("mouseleave",function(){
            data.isOnbtn=false;
        });

        //底部操作
        var isBottom=false;
        var bAni;
        var bottomHide=function(){
            if(isBottom){
                isBottom=false;
                if(bAni){
                    clearTimeout(bAni);
                    bAni=null;
                }
                $footer.removeClass("show");
                $productBtns.removeClass("show");
                $rptBg.removeClass("show");
            }
        };
        var bottomShow=function(){
            if(!isBottom){
                isBottom=true;
                $footer.addClass("show");
                $productBtns.addClass("show");
                $rptBg.addClass("show");
                if(bAni)
                    clearTimeout(bAni);
                bAni=setTimeout(bottomHide,2000);
            }
        };
        $footer.on("mouseenter",function(){
            if(bAni){
                clearTimeout(bAni);
                bAni=null;
            }
        });
        $footer.on("mouseleave",function(){
            if(bAni)
                clearTimeout(bAni);
            bAni=setTimeout(bottomHide,2000);
        });
        $(document).on("mousewheel DOMMouseScroll",function(event){
            var sd=event.originalEvent.wheelDelta||event.originalEvent.detail*-1;
            if(sd>0){
                bottomHide();
            }
            else{
                bottomShow();
            }
        });


        //导航事件
        $("#nav_more").on("mouseenter",function(){
            $moreNav.addClass("show");
        });
        $moreNav.on("mouseleave",function(){
            $moreNav.removeClass("show");
            $hBdot.css({left:-9999,top:106});
        });
        $hNavli.on("mouseenter",function(){
            $hBdot.css({left:18,top:106+$hNavli.index(this)*69});
        });
        $hNav.on("mouseleave",function(){
            $hBdot.css({left:-9999});
        });
        $hSubnav.find("dt").on("mouseenter",function(){
            $hBdot.css({left:18});
            $hSdot.css({left:-9999});
        });
        $hSubDD.on("mouseenter",function(){
            $hSdot.css({left:18,top:53+$hSubDD.index(this)*44});
            $hBdot.css({left:-9999});
        });
        $hSubnav.on("mouseleave",function(){
            $hSdot.css({left:-9999});
        });
    })();
</script>
</body>
</html>